<?php
include 'include/header.php';
?>
<div style="background-color:#fff; margin-left: 150px; margin-right: 150px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1)">
	<div style="border: 1px solid #D1D1D1; margin-left: 25px; margin-right: 25px;">
		<h3>Form Pembuatan Kuesioner Penelitian</h3>
		<form  method="post" action="<?php echo base_url().'index.php/kuesioner/tambah_kuesioner/'?>">
			<div class="form-group">
				<label>Nama Kuesioner</label>
				<input class="form-control" name="nama">
			</div>
			<div class="form-group">
				<label>Identitas Responden</label>
				<button type="button" class="btn btn-default" onclick="tambah_id()">Tambah Identitas</button>
			<div id="identitas">
			<!--penambahan identitas responden muncul disini-->
			</div>
			<br />
				
			 </div>
			<div class="form-group">
				<label>Keterangan petunjuk pengisian kuesioner</label>
				<input class="form-control" name="ket_kues">
			</div>
			<div class="form-group">
				<div class="col-lg-6" id="tambah_kategori">
					<div class="input-group">
					  <span class="input-group-btn">
						<button class="btn btn-default" type="button" onclick="tambah_kategori()">Tambah kategori!</button>
					  </span>
					  <input type="text" class="form-control" id="jumlah_kategori" name="jumlah_kategori">
					</div>
				</div>
				<div id="kategori_kues" >
				<!--setiap kategori muncul disini-->
				</div>
			</div>
		<div class="form-group">
		  <button type="submit" class="btn btn-default">Save</button>
		</div>
		</form>
	</div>
	<div id="modal_skala" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Masukkan jumlah pertanyaan</h4>
			</div>
			<div class="modal-body">
				<p id="kolom_bayangan1" class="form-control" style="display:none"></p>
				<p id="kat_bayangan" class="form-control" style="display:none"></p>
				<div class="col-lg-6" id="tambah_skala">
					
					  <input id="jumlah_skala" class="form-control" placeholder="Jumlah skala">
					
				</div><!-- /.col-lg-6 -->
				<div class="col-lg-6">
				<input id="jumlah_perta_skala" class="form-control" placeholder="Jumlah pertanyaan">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" onclick="modal_kues_skala()">Tambah</button>
			</div>
		</div>
	  </div>
	</div>
	<div id="modal_kues_teks" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Masukkan pertanyaan</h4>
			</div>
			<div class="modal-body">
				<p id="kat_teks_bayangan" class="form-control" style="display:none"></p>
				<p id="kol_bayangan" class="form-control" style="display:none"></p>
				<input id="pertanyaan" class="form-control" placeholder="Pertanyaan">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" onclick="tambah_kues_teks()">Tambah</button>
			</div>
		</div>
	  </div>
	</div>
</div>
<script>

var ident_number = 0;
var kues_teks_number = 0;
var kues_skala_number = 0;

	function tambah_id(){
			ident_number++;
			var identitas = '<div id="row_ident-'+ident_number+'" class="row">';
			identitas += '<div class="col-lg-4">';
			identitas += '<div class="input-group">';
			identitas += '<span class="input-group-btn">'+ident_number+'. </span>';
			identitas += '<input type="text" class="form-control" id="add_ident-'+ident_number+'" name="add_ident[]">';
			identitas += '<span class="input-group-btn"><button type="button" class="btn btn-default" onclick="delete_ident('+ident_number+')">X</button></span>';
			identitas += '</div>';
			identitas += '</div>';
			identitas += '</div>';
			$('#identitas').append(identitas);
			}
	
	function delete_ident(id) {
		$('#row_ident-'+id).remove();
	}
	
	
	function tambah_kategori(){
		for ( var i = 1; i <= $('#jumlah_kategori').val(); i++) {
		var kategori = '<div id="kategori-'+i+'" style="border: 1px solid #D1D1D1; margin-left: 25px">';
		kategori += '<div class="dropdown">';
		kategori += '<label>Kategori '+i+'</label><br />';
		kategori += '<button class="btn btn-default dropdown-toggle" type="button" id="jenis_kues" data-toggle="dropdown">Tambah Pertanyaan<span class="caret"></span></button>';
		kategori += '<ul class="dropdown-menu" role="menu" aria-labelledby="jenis_kues">';
		kategori += '<li role="presentation"><a id="teks'+i+'" role="menuitem" tabindex="-1" href="#" onclick="modal_kues_teks('+i+')">Teks</a></li>';
		kategori += '<li role="presentation"><a id="skala'+i+'" role="menuitem" tabindex="-1" href="#" onclick="tambah_kues_skala('+i+')">Skala</a></li>';
		kategori += '</ul>';
		kategori += '</div>';
		kategori += '<div id="kues_teks'+i+'"></div>';
		kategori += '</div><br />';
		$('#kategori_kues').append(kategori);
		}
		$('#tambah_kategori').hide();
	}
	
	function modal_kues_teks(kategori){
		var a = $('#teks'+kategori).closest('div.dropdown').next('#kues_teks'+kategori).attr('id');
		$('#kat_teks_bayangan').text(kategori);
		$('#kol_bayangan').text(a);
		//alert($('#kol_bayangan').text());
		$('#modal_kues_teks').modal('show');
	}
	
	function tambah_kues_teks(){
		kues_teks_number++;
		$('#modal_kues_teks').modal('hide');
		var a = $('#kat_teks_bayangan').text();
		var b = $('#pertanyaan').val();
		var c = $('#kol_bayangan').text();
		var teks = '<div id="teks-'+kues_teks_number+'" class="input-group" style="background-color: antiquewhite;">';
		teks += '<input class="form-control" name="jns_kues'+a+'[]" value="teks" style="display:none">';
		teks += '<input class="form-control" placeholder="Pertanyaan" name="kues'+a+'[]" readonly value="'+b+'">';
		teks += '<div class="input-group-btn">';
		teks += '<button type="button" class="btn btn-default" onclick="delete_teks('+kues_teks_number+')">X</button>';
		teks += '</div>';
		teks += '</div>';
		teks += '<br />';
		$('#'+c).append(teks);
	}
			
	function delete_teks(id){
		$('#teks-'+id).remove();
	}
	
	function tambah_kues_skala(kategori){
		var a = $('#skala'+kategori).closest('div.dropdown').next('#kues_teks'+kategori).attr('id');
		$('#kolom_bayangan1').text(a);
		$('#kat_bayangan').text(kategori);
		$('#modal_skala').modal('show');
	}
	
	
	function modal_kues_skala(){
		kues_teks_number++;
		var a = $('#kat_bayangan').text();
		var b = $('#jumlah_perta_skala').val();
		var c = $('#kolom_bayangan1').text();
		var d = $('#jumlah_skala').val();
		
		var html = '<div id="kol_kuesskala'+kues_teks_number+'" style="background-color: aliceblue"><button type="button" class="btn btn-default" onclick="delete_skala('+kues_teks_number+')" style="margin-left: 935px;">X</button>';
			
		
		for(var j = 1; j <= d; j++){
			html += '<div class="row">';
			html += '<div class="col-lg-4">';
			html += '<p>Skala '+j+'</p>';
			html += '<div class="input-group-btn">';
			html += '<input class="form-control" name="jml_skala[]" value="'+d+'" style="display:none">';
			html += '<input class="form-control" placeholder="masukkan nama skala" name="kues'+a+'[]">';
			html += '<input class="form-control" name="jns_kues'+a+'[]" value="jml_skala" style="display:none">';
			//html += '<input class="form-control" placeholder="masukkan nama skala" name="kues'+a+'[]" style="display:none">';
			html += '</div>';
			html += '</div>';
			html += '</div>';
		}
		html += '<br />';
		
		for( var i = 1; i <= b; i++){
			html += '<div class="row">';
			html += '<div class="col-lg-4">';
			html += '<p>Pertanyaan '+i+'</p>';
			html += '<div class="input-group-btn">';
			html += '<input class="form-control" name="jns_kues'+a+'[]" value="skala" style="display:none">';
			html += '<input class="form-control" placeholder="masukkan nama pertanyaan" name="kues'+a+'[]">';
			html += '</div>';
			html += '</div>';
			html += '</div>';
		}
			
		html += '</div>';
		html += '<br />';
		
		$('#modal_skala').modal('hide');
		$('#'+c).append(html);
	}
	
	function delete_skala(id){
		$('#kol_kuesskala'+id).remove();
	}
	

</script>
<?php
include 'include/footer.php';
} else{ 
		echo 'Anda belum login, silahkan login terlebih dahulu dengan klik link berikut';
		echo '<a href="'.base_url('index.php/guest').'"></a>';
	}
} else
	{
		echo 'Anda belum login, silahkan login terlebih dahulu dengan klik link berikut';
		echo '<a href="'.base_url('index.php/guest').'"></a>';
	}
	
?>